<template>
  <div class="app-container">
    <!--主列表开始-->
    <!--搜索-->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
      <el-form-item label="技能标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable
          size="small" style="width: 180px" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="技能类型" prop="type">
        <el-select  v-model="queryParams.type" size="small" placeholder="请选择" clearable>
          <el-option v-for="item in skillsTypeOptions" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--按钮区-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus"
          size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete"
          size="mini" @click="handleDelete" :disabled="multiple">删除</el-button>
      </el-col>
    </el-row>
    <!--表格区-->
    <el-table v-loading="loading" :data="skillsList"
              @selection-change="handleSelectionChange" row-key="id"
              @expand-change="expandRow" :expand-row-keys="expandRowKeys">
      <!--技能批次子表格开始-->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row :gutter="10" class="mb8" v-if="props.row.cycle">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus"
                         size="mini" @click="handleAddBatch(props.row.id)">新增</el-button>
            </el-col>
          </el-row>
          <el-table :data="batchList" v-loading="batchLoading"
                    :header-cell-style="{ background: '#02b64a', color: '#ffffff' }">
            <el-table-column label="序号" align="center" prop="id"/>
            <el-table-column label="技能批次" align="center" prop="studyBatch">
              <template slot-scope="scope">
                {{ scope.row.studyBatch === 0 ? '永久' : '第'+scope.row.studyBatch+'批次'}}
              </template>
            </el-table-column>
            <el-table-column label="开始日期" align="center" prop="startDate">
              <template slot-scope="scope">
                {{ scope.row.startDate !==null ? scope.row.startDate : '-'}}
              </template>
            </el-table-column>
            <el-table-column label="结束日期" align="center" prop="endDate">
              <template slot-scope="scope">
                {{ scope.row.endDate !==null ? scope.row.endDate : '-'}}
              </template>
            </el-table-column>
            <el-table-column label="关联人数" align="center" prop="batchUserNum">
              <template slot-scope="scope">
                <el-link type="primary" @click="relatedUser(scope.row.id)">{{scope.row.batchUserNum}}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="启用状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.status ? '已启用':'未启用'" placement="top">
                  <el-switch v-model="scope.row.status"
                             @change="handleBatchStatusChange(scope.row,props.row.id)"/>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200" v-if="props.row.cycle">
              <template slot-scope="scope" >
                <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                  <el-button size="mini" circle type="success"
                             icon="el-icon-edit" @click="handleEditBatch(scope.row.id)"/>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                  <el-button size="mini" circle type="danger"
                             icon="el-icon-delete" @click="handleDeleteBatch(scope.row.id)"/>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!--技能批次子表格结束-->

      <!--学习技能主表格开始-->
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="id" width="80"/>
      <el-table-column label="技能标题" align="center" prop="title" :show-overflow-tooltip="true"/>
      <el-table-column label="技能封面图" align="center" prop="img">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.img"/>
        </template>
      </el-table-column>
      <el-table-column label="技能类型" align="center" prop="type" :formatter="skillsTypeFormat"/>
      <el-table-column label="关联试题" align="center" prop="hasQuestions">
        <template slot-scope="scope">
          <el-link type="primary" @click="relatedQuestions(scope.row.id)">{{scope.row.hasQuestions}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="考试题数" align="center" prop="examNum"/>
      <el-table-column label="周期学习" align="center" prop="cycle">
        <template slot-scope="scope">
          <el-tag :type="scope.row.cycle  ? 'success' : 'info'">
            {{ scope.row.cycle ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="当前技能批次" align="center" prop="studyBatch">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.skillsBatchId">
            {{scope.row.studyBatch === 0 ? '永久' : '第'+scope.row.studyBatch+'批次'}}
          </el-tag>
          <el-tag type="info" v-else>未发布</el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column label="启用状态" align="center" prop="status">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tooltip :content="scope.row.status ? '已启用':'未启用'" placement="top">-->
<!--            <el-switch v-model="scope.row.status"-->
<!--                       @change="handleSkillsStatusChange(scope.row.status)"/>-->
<!--          </el-tooltip>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope" >
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
            <el-button size="mini" circle type="success"
              icon="el-icon-edit" @click="handleEdit(scope.row.id)"/>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button size="mini" circle type="danger"
              icon="el-icon-delete" @click="handleDelete(scope.row)"/>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList"/>
    <!--主列表结束-->


    <!--新增修改技能弹窗-->
    <el-dialog title="技能编辑" :visible.sync="skillsDialogVisible"  v-if="skillsDialogVisible" width="70%">
      <edit-skills :skillsId="editSkillsId" @editSkillsSuccess="editSkillsSuccess"></edit-skills>
    </el-dialog>


    <!-- 关联试题弹窗 -->
    <el-dialog title="关联试题" :visible.sync="questionsDialogVisible" v-if="questionsDialogVisible"  width="50%">
      <related-questions :skillsId="editSkillsId" @relatedQuestionSuccess="relatedQuestionSuccess"></related-questions>
    </el-dialog>

    <!-- 技能批次关联用户弹窗 -->
    <el-dialog title="关联用户" :visible.sync="batchUserDialogVisible" v-if="batchUserDialogVisible"  width="50%">
      <related-user :batchId="editBatchId" @relatedUserSuccess="relatedUserSuccess"></related-user>
    </el-dialog>

    <!--新增修改技能批次弹窗-->
    <el-dialog title="批次编辑" :visible.sync="batchDialogVisible"  v-if="batchDialogVisible" width="25%">
      <edit-skills-batch :skillsId="editSkillsId" :batchId="editBatchId" @editBatchSuccess="editBatchSuccess"></edit-skills-batch>
    </el-dialog>

  </div>


</template>

<script>
import editSkills from '@/views/regulatory/studyskills/editSkills.vue'
import relatedQuestions from '@/views/regulatory/studyskills/relatedQuestions.vue'
import relatedUser from '@/views/regulatory/studyskills/relatedUser.vue'
import editSkillsBatch from '@/views/regulatory/studyskills/editSkillsBatch.vue'
import {
  delSkills, getSkillsList,getSkillsBatchList,delBatch,openBatch,closeBatch
} from '@/api/regulatory/studySkills'


export default {
  name: "studySkills",
  components: { relatedUser, relatedQuestions, editSkills,editSkillsBatch},
  data() {
    return {
      queryParams: { //技能列表查询参数
        pageNum: 1,
        pageSize: 10,
        title:undefined,
        type:undefined
      },
      skillsList: [], // 技能列表
      loading: true,  // 技能列表遮罩层
      multiple: true, //技能列表多选删除禁用
      skillsIds: [],  // 技能列表选中id数组
      total: 0, // 总条数
      skillsTypeOptions:[], //技能类型下拉框
      expandRowKeys: [], // 技能列表展开行的数组
      editSkillsId : '', //编辑技能id
      skillsDialogVisible: false, //编辑技能弹窗开关

      questionsDialogVisible:false,//关联试题弹窗开关

      batchList : [], //技能批次列表数据
      batchLoading: true,//技能批次列表遮罩层
      editBatchId : '',//编辑技能批次id

      batchUserDialogVisible:false, //技能批次关联用户弹窗开关

      batchDialogVisible : false, //新增修改技能批次弹窗开关


    };
  },
  created() {
    //技能类型下拉框赋值
    this.getDicts("knowledge_type").then(response => {
      this.skillsTypeOptions = response.data;
    })
    //技能列表分页查询
    this.getList();
  },
  methods: {
    /** 技能列表-搜索按钮操作 */
    handleQuery(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 技能列表-重置按钮操作 */
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.handleQuery();
    },
    /** 技能列表-分页查询 */
    getList() {
      this.loading = true;
      getSkillsList(this.queryParams).then((response) => {
        this.skillsList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 技能列表-多选*/
    handleSelectionChange(selection) {
      this.skillsIds = selection.map(item => Number(item.id))
      this.multiple = !selection.length;
    },
    /** 技能列表-批量删除 */
    handleDelete(row) {
      const ids = row.id || this.skillsIds;
      this.$confirm('是否删除选中技能,删除后和该技能相关的数据都将被删除!', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delSkills(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    /** 技能列表-新增技能 */
    handleAdd() {
      this.editSkillsId = '';
      this.skillsDialogVisible = true;
    },
    /** 技能列表-编辑 */
    handleEdit(id) {
      this.editSkillsId = id;
      this.skillsDialogVisible = true;
    },
    /** 技能列表-技能类型字典回显处理 */
    skillsTypeFormat(row) {
      return this.selectDictLabel(this.skillsTypeOptions,row.type)
    },
    /** 技能列表弹窗-新增修改成功回调 */
    editSkillsSuccess() {
      this.skillsDialogVisible = false;
      this.getList();
    },
    /** 技能列表-展开节点 */
    expandRow(row,expandedRows) {
      if (expandedRows.length) {
        this.expandRowKeys = [row.id]; // 只保留当前点击的行
      } else {
        this.expandRowKeys = []; // 关闭所有行时清空数组
      }
      this.getSkillsBatchList(row.id);
    },
    /** 技能批次子列表-查询列表*/
    getSkillsBatchList(id) {
      this.batchLoading = true;
      getSkillsBatchList(id).then(res=> {
        this.batchLoading = false;
        this.batchList = res.data;
      })
    },

    /** 技能关联试题弹窗 */
    relatedQuestions(id) {
      this.editSkillsId = id;
      this.questionsDialogVisible = true;
    },
    /** 技能关联试题弹窗-关联解绑之后的回调 */
    relatedQuestionSuccess() {
      this.getList();
    },

    /** 技能批次关联用户弹窗 */
    relatedUser(batchId) {
      this.editBatchId = batchId;
      this.batchUserDialogVisible = true;
    },
    /** 技能批次关联用户弹窗-关联解绑之后的回调 */
    relatedUserSuccess() {
      this.getSkillsBatchList(this.expandRowKeys[0]);
    },

    /** 技能批次子列表-新增批次*/
    handleAddBatch(skillsId) {
      this.editBatchId = '';
      this.editSkillsId = skillsId;
      this.batchDialogVisible = true;
    },
    /** 技能批次子列表-修改批次*/
    handleEditBatch(batchId) {
      this.editBatchId = batchId;
      this.batchDialogVisible = true;
    },
    /** 技能批次子列表-删除批次*/
    handleDeleteBatch(batchId) {
      this.$confirm('是否删除选中批次,删除后和该批次相关的数据都将被删除!', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delBatch(batchId);
      }).then(() => {
        this.getSkillsBatchList(this.expandRowKeys[0]);
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    /** 技能批次子列表-新增修改之后的回调*/
    editBatchSuccess() {
      this.batchDialogVisible = false;
      this.getSkillsBatchList(this.expandRowKeys[0]);
    },
    /** 技能批次子列表- 启动暂停批次*/
    handleBatchStatusChange(row,skillsId) {
      if(row.status) { //启用批次
        this.$confirm('是否启用该批次,正在启用的批次将会被关闭!', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return openBatch(row.id,skillsId);
        }).then(() => {
          this.msgSuccess("启用成功");
          this.getList();
          this.getSkillsBatchList(skillsId);
        }).catch(function() {
          row.status = row.status ? false : true;
        });
      }else { //关闭批次
        this.$confirm('是否关闭批次,关闭后技能将会被下架!', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return closeBatch(row.id);
        }).then(() => {
          this.msgSuccess("关闭成功");
          this.getList();
          this.getSkillsBatchList(skillsId);
        }).catch(function() {
          row.status = row.status ? false : true;
        });
      }
    }
  }
}
</script>
<style>

</style>
